<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-row>
        <el-col :span="24" class="avatar-col">
          <div class="avatar-container">
            <img :src="user.avatar" class="avatar-image" />
          </div>
        </el-col>
      </el-row>

<!--明天接着向下改-->
      <el-form-item class="custom-form-item" label="姓名">
        <el-col :span="8">
          <el-input v-model="user.friendName"></el-input>
        </el-col>
        <!--        <el-input v-model="friend.username"/>-->
      </el-form-item>
      <el-form-item class="custom-form-item" label="性别">
        <!--        <el-input v-model="friend.sex === 1 ? '男' : '女'"/>-->
        <el-select v-model="user.sex" clearable placeholder="请选择">
          <!--
          数据类型一定要和取出的json中的一致，否则没法回填
          因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="1" label="男"/>
          <el-option :value="0" label="女"/>
        </el-select>
      </el-form-item>
      <el-form-item class="custom-form-item" label="邮箱">
        <el-input v-model="user.email"/>
      </el-form-item>
      <el-form-item class="custom-form-item" label="地址">
        <el-input v-model="user.address"/>
      </el-form-item>
      <el-form-item class="custom-form-item" label="QQ">
        <el-input v-model="user.qq"/>
      </el-form-item>
      <el-form-item class="custom-form-item" label="微信">
        <el-input v-model="user.wechat"/>
      </el-form-item>
      <el-form-item class="custom-form-item" label="邮编">
        <el-input v-model="user.postcode"/>
      </el-form-item>
      <el-form-item class="custom-form-item" label="电话">
        <el-input v-model="user.phone"/>
      </el-form-item>
      <!--      <el-form-item class="custom-form-item" label="生日">-->
      <!--        &lt;!&ndash;这里返回的是方法以后的数据，所以不能v-model双向绑定&ndash;&gt;-->
      <!--        <el-input v-text="dateFormat(user.birthday)"/>-->
      <!--      </el-form-item>-->
      <el-form-item label="添加时间">
        <el-date-picker
          v-model="user.birthday"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
    <!--头像-->
      <el-form-item>
        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="BASE_API+'/kaioss/fileoss'"
          class="avatar-uploader">
          <img :src="this.user.avatar" width="100px" height="100px" style="border-radius: 50%;"/>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate">保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import userApi from '@/api/edu/friend'

export default {
  data() {
    return {
      BASE_API: process.env.BASE_API, // 接口API地址
      user: {
        username: '',
        sex: 0,
        email: '',
        qq: '',
        wechat: '',
        phone: '',
        address: '',
        postcode: '',
        birthday: '',
        avatar: '',
      },
      saveBtnDisabled: false // 保存按钮是否禁用,
    }
  },
  filters: {},
  watch: {
    // 监听
    $route(to, from) {
      // 路由变化方式，路由发生变化，方法就会执行
      this.init()
    },
  },
  created() {
    this.init()
  },
  methods: {
    //上传封面成功调用的方法
    handleAvatarSuccess(res, file) {
      // console.log("返回值" + res.data.url)
      this.user.avatar = res.data.url
      this.$forceUpdate()
    },
    //上传之前调用的方法
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 判断路由里有没有id值，决定是详情还是保存
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.getInfo(id)
      } else {
        this.user = {}
      }
    },
    // 根据id查询朋友的信息
    getInfo(id) {
      userApi.getFriendInfo(id).then(response => {
        this.user = response.data.user
      })
    },
    dateFormat(value) {
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() < 9 ? "0" + (date.getMonth() + 1) : "" + (date.getMonth() + 1);
      var day = date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate();
      return (year + "-" + month + "-" + day);
    },
    // 保存按钮，判断是添加还是修改
    saveOrUpdate() {
      // 根据teacher判断是否有id
      if (!this.user.id) {
        // 没有id，添加
        this.saveFriend()
      } else {
        this.updateTeacher()
      }
    },
    // 修改讲师的方法
    updateTeacher() {
      userApi.updateTeacher(this.user).then(Response => {
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        // 回到列表页面，路由跳转
        this.$router.push({path: '/'})
      })
    },
    // 保存
    saveFriend() {
      userApi.addFriend(this.user)
        .then(response => { // 添加成功
          // 提示信息
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        }).then(response => {
        // 回到列表页面，路由跳转
        this.$router.push({path: '/'})
      }).catch((response) => {
        this.$message({
          type: 'error',
          message: '保存失败'
        })
      })
    }

  }
}
</script>

<style scoped>
.custom-form-item {
  height: 50px; /* 设置自定义的固定高度 */
}
</style>
